<template>
  <view class="container">
    <u-toast ref="uToastRef"></u-toast>
    <view class="goods-list">
      <shop-goods-list :goods-list="goodsList">
        <template #prefix="scope" class="slot">
          <view class="checkbox-item">
            <view :class="{checkbox:true,select:selectedGoodsIds.includes(scope.goods.cartId)}"
                  @tap="select(scope.goods.cartId)">
              <u-icon color="#ffffff" name="checkmark" size="44"></u-icon>
            </view>
            <view @tap="deleteCart(scope.goods.cartId)">
              移除
            </view>
          </view>
        </template>
      </shop-goods-list>
    </view>
    <view class="balance-item">
      <view class="left">
        <view :class="{checkbox:true,select:selectAll}" @tap="selectAll = !selectAll">
          <u-icon color="#ffffff" name="checkmark" size="44"></u-icon>
        </view>
        <view>全选</view>
        <view>
          ￥{{ totalPrice || '0.00' }}
        </view>
      </view>
      <view class="right">
        <u-button :disabled="selectedGoodsIds.length === 0" text="结算" type="error" @click="DoOrder"></u-button>
      </view>
    </view>
    <shop-tabbar></shop-tabbar>
  </view>
</template>

<script lang="ts" setup>
import {computed, ref} from "vue";
import type {CartGoods, PageCartReqVO} from "@/interfaces/cart";
import {useDelCartApi, usePageCartApi} from "@/services/api";
import {useStore} from "vuex";
import {onLoad, onPullDownRefresh, onReachBottom, onShow} from "@dcloudio/uni-app";

const uToastRef = ref()
const store = useStore()
const selectedGoodsIds = ref<number[]>([])
const selectAll = computed({
  get: () => {
    return selectedGoodsIds.value.length === goodsList.value.length && goodsList.value.length != 0
  },
  set: (isSelect: boolean) => {
    if (isSelect) {
      selectedGoodsIds.value = goodsList.value.map(value => value.cartId)
    } else {
      selectedGoodsIds.value = []
    }
  }
})
const totalPrice = computed(() => goodsList.value.filter(value => selectedGoodsIds.value.includes(value.cartId)).reduce((prev, cur) => prev + cur.price, 0))
const select = (id: number) => {
  if (selectedGoodsIds.value.includes(id)) {
    selectedGoodsIds.value = selectedGoodsIds.value.filter(value => value != id)
  } else {
    selectedGoodsIds.value.push(id)
  }
}
const goodsList = ref<CartGoods[]>([])
const DoOrder = () => {
  uni.$u.route({
    url: '/pages/order/order',
    params: {
      data: JSON.stringify(goodsList.value.filter(value => selectedGoodsIds.value.includes(value.cartId)))
    }
  })
}
const deleteCart = async (id: number) => {
  await useDelCartApi({id: id})
  uToastRef.value.show({
    message: '移除成功',
    type: 'success',
    duration: 1000,
    complete: () => {
      goodsList.value = goodsList.value.filter(value => value.cartId != id)
    }
  })

}
const pageCartReq = ref<PageCartReqVO>({
  current: 1,
  size: 10,
  userId: ""
})
const init = async () => {
  pageCartReq.value.userId = store.getters["auth/getUserId"]
  const {data: res} = await usePageCartApi(pageCartReq.value)
  goodsList.value = [...goodsList.value, ...res.list]
}
onShow(() => {
  goodsList.value = []
  init()
})
onLoad(() => {
  goodsList.value = []
  init()
})
onPullDownRefresh(() => {
  goodsList.value = []
  pageCartReq.value.current = 1
  init()
  uni.stopPullDownRefresh()
})
onReachBottom(() => {
  pageCartReq.value.current += 1
  init()
})
</script>


<style lang="scss" scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  position: relative;

  .goods-list {
    padding: 12px;
    min-height: 100vh;
    background-color: #edf2fd;

    .goods {
      display: flex;
      flex-direction: row;

      .checkbox-item {
        height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .checkbox {
          width: 44rpx;
          height: 44rpx;
          border: 1px solid #acafbd;
          display: flex;
          border-radius: 50%;
          justify-content: center;
          align-items: center;
        }

        .select {
          background-color: #dd524d;
          border: 1px solid #dd524d;
        }
      }
    }
  }

  .balance-item {
    width: 95%;
    position: sticky;
    bottom: 50px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    border-top: 1px solid #cccccc;
    padding: 12px 12px 12px 12px;

    .left {
      flex: 2;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 12px;

      .checkbox {
        width: 44rpx;
        height: 44rpx;
        border: 1px solid #acafbd;
        display: flex;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
      }

      .select {
        background-color: #dd524d;
        border: 1px solid #dd524d;
      }
    }

    .right {
      flex: 3;
      display: flex;
    }

  }
}
</style>
